<template>
    <div class="box2">
        <div class="lb">
            <p class="lb-title">年龄比例</p>
            <p class="lb-bg"></p>
        </div>
        <div class="lb-charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入echarts图表集成包
import * as echarts from 'echarts'

//获取组件实例
let charts = ref()

onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}'
        },
        legend: {
            right: 30,
            top: 40,
            data: ['10岁以下  15%', '10-18岁  20%', '18-35岁  35%', '35-55岁  20%', '55岁以上  10%'],
            orient: 'vertical', //图例组件方向的设置
            textStyle: {
                color: 'white',
                fontSize: 16,
            },
        },
        series: [{
            name: '数据详情',
            type: 'pie',
            radius: ['40%', '70%'],
            left: -150,
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
            },
            label: {
                show: true,
                position: 'inside',
                color: 'white',
                formatter: '{c}%'
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 15, name: '10岁以下  15%' },
                { value: 20, name: '10-18岁  20%' },
                { value: 35, name: '18-35岁  35%' },
                { value: 20, name: '35-55岁  20%' },
                { value: 10, name: '55岁以上  10%' },
            ]
        }]
    })
})
</script>

<style scoped lang="scss">
.box2 {
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% auto;
    margin-top: 15px;

    .lb {
        height: 37px;

        .lb-title {
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .lb-bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: cover;
            margin: 10px 0 0 20px;
        }
    }

    .lb-charts {
        height: 220px;
    }
}
</style>